$(function () {
    // 鼠标经过显示删除按钮
    $('.content-img-list').on('mouseover', '.content-img-list-item', function () {
        $(this).children('a').removeClass('hide');
    });
    // 鼠标离开隐藏删除按钮
    $('.content-img-list').on('mouseleave', '.content-img-list-item', function () {
        $(this).children('a').addClass('hide');
    });
});
class imgFactory {
    /**
     * 
     * @param elem 容器id
     * @param imgFile 文件，从input中获取 （数组）
     * @param imgSrc 用于预览图片的可访问的本地url （数组）
     * @param imgName 图片名 （数组）
     */
    constructor(elem, imgFile, imgSrc, imgName) {
        this.elem = elem;
        this.imgFile = imgFile;
        this.imgSrc = imgSrc;
        this.imgName = imgName;
    }
    
    init() {
        //绑定图片上传
        var that = this;
        var imgBox = 'content-img-list-' + that.elem;
        var upload = this.elem + "-upload";
        //创建img插件
        // 创建一个带有类名的 p 元素
        var newParagraph = '<div class="upload-content">\n' +
            '    <div class="content-img">\n' +
            '        <div class="file">\n' +
            '           <span class="mui-icon mui-icon-plusempty" style="font-size: 16px"></span>上传图片，支持jpg/png<input type="file" multiple name="file" accept="image/*" id="' + upload + '" >\n' +
            '        </div>\n' +
            '        <ul class="content-img-list" id="' + imgBox + '">\n' +
            '        </ul>\n' +
            '    </div>\n' +
            '</div>';

        // 将这个 p 元素添加到文档中的某个特定元素之后
        $('#' + that.elem).html(newParagraph);

        $('#' + upload).on('change', function () {

            // if(imgSrc.length>=4){
            // 	return alert("最多只能上传4张图片");
            // }
            var imgSize = this.files[0].size;  //b
            // if(imgSize>1024*1024*10){//1M
            // 	return alert("上传图片不能超过1M");
            // }
            // console.log(this.files[0].type)
            // if(this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif'){
            // 	return alert("图片上传格式不正确");
            // }

            var fileList = this.files;
            for (var i = 0; i < fileList.length; i++) {
                var imgSrcI = that.getObjectURL(fileList[i]);
                that.imgName.push(fileList[i].name);
                that.imgSrc.push(imgSrcI);
                that.imgFile.push(fileList[i]);
            }
            // if(imgSrc.length==10){//隐藏上传按钮
            // 	$('.content-img .file').hide();
            // }
            that.addNewContent(imgBox, that);
            this.value = null;//解决无法上传相同图片的问题
        })

        // 单个图片删除
        $(".content-img-list").on("click", '.content-img-list-item a', function () {
            var index = $(this).attr("index");
            that.imgSrc.splice(index, 1);
            that.imgFile.splice(index, 1);
            that.imgName.splice(index, 1);
            that.addNewContent(imgBox, that);
            // if (that.imgSrc.length < 4) {//显示上传按钮
            // 	$('.content-img .file').show();
            // }
        });
    }

    //建立一个可存取到改file的url
    getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    addNewContent(obj, that) {
        // console.log(that.imgSrc)
        // console.log(obj)
        $("#" + obj).html("");
        for (var a = 0; a < that.imgSrc.length; a++) {
            var oldBox = $("#" + obj).html();
            // console.log(oldBox)
            $("#" + obj).html(oldBox + '<li class="content-img-list-item"><img src="' + that.imgSrc[a] + '" alt="" data-preview-src="" data-preview-group="'+obj+'"><a index="' + a + '" class="hide delete-btn"><i class="mui-icon mui-icon-trash">删除图标</i></a></li>');
        }
    }
    /**
     * @param request 上传接口配置
     * @param msg 提示信息
     * @param callback 上传后回调函数 -> 实例
     * function (data) {
     *    if (data.isSuccess){
     *        //上传成功,获取上传结果data.res
     *        console.log(data.res)
     *    }
     * }
     *
     */
    upload(request,msg,callback){
        var formFile = new FormData();
        
        if (this.imgFile.length===0){
            var data={}
            data.isSuccess = true 
            data.msg = "上传成功，没有选择图片"
            data.res = {};
            callback(data)
        }
        // 遍历图片imgFile添加到formFile里面
        $.each(this.imgFile, function (i, file) {
            formFile.append(request.fileParamName, file);
        });
        $.ajax({
            url: request.url,
            type: 'POST',
            data: formFile,
            //异步上传，通过回调函数获取上传结果
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (res) {
                if (res.code === 0) {
                    //alert("上传成功")
                    console.log(msg+'，上传成功！');
                    var data={}
                    data.isSuccess = true
                    data.msg = "上传成功"
                    data.res = res;
                    callback(data)
                } else {
                    console.log(msg+'，上传失败！');
                    var data={}
                    data.isSuccess = false
                    data.msg = "上传失败"
                    data.res = res;
                    callback(data)
                }
            }
        })
    }
}
